<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="closeFn"
    >
      <!-- 表单 -->
      <el-form
        ref="form"
        label-width="80px"
        :model="formData"
        :rules="rules"
      >
        <!-- 经纪下拉框 -->
        <el-form-item label="经纪">
          <el-select
            v-model="formData.agent"
            style="width: 50%"
            placeholder="请选择"
          >
            <el-option v-for="item in agentsList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <!-- 分类下拉框 -->
        <el-form-item label="分类">
          <el-select
            v-model="formData.category"
            style="width: 50%"
            placeholder="请选择"
          >
            <!-- 巨尼玛坑:value="item.title" :label="item.title" -->
            <el-option v-for="item in categoriesList" :key="item.id" :value="item.id" :label="item.title" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="标签" prop="username">
          <el-tag
            v-for="tag in dynamicTags"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
        </el-form-item>
        <el-form-item label="地址">
          <el-row type="flew">
            <el-select v-model="map.province" placeholder="请选择省份" @change="changeFn">
              <el-option v-for="item in province" :key="item" :value="item" :label="item" />
            </el-select>
            <!-- <el-select v-model="map.district" placeholder="请选择" @change="districtChange">
              <el-option v-for=" (item,index) in districtList" :key="index" :value="item.name" :label="item.name" />
            </el-select>
            县 -->
            <!-- <el-select v-model="map.county" placeholder="请选择" @change="countyChange">
              <el-option v-for="(item,index) in countyList" :key="index" :value="item.name" :label="item.name" />
            </el-select> -->
          </el-row>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="formData.price" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="formData.content" type="textarea" />
        </el-form-item>
        <el-form-item label="介绍图片" />
        <ImageUpload ref="img" />
        <el-form-item label="封面" />
        <ImageUpload ref="photos" />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImageUpload from '@/views/categories/component/ImageUpload.vue'
// 获取新增房产，分类列表,经纪列表
import { addProperty, classify, agents, getEditHouse, editHouse, delHouse } from '@/api/property'
export default {
  components: {
    ImageUpload
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rules: {
        title: [{ required: true, message: '不写标题我报警啦！', trigge: 'blur' }, { min: 2, max: 20, message: '请输入2-20的标题', trigge: 'blur' }]
      },
      districtList: [], // 区列表
      countyList: [], // 县列表
      province: [
        '北京', '天津', '上海', '重庆', '新疆', '西藏', '宁夏', '内蒙古', '广西', '黑龙江', '吉林', '辽宁', '河北', '山东', '江苏', '安徽', '浙江', '福建', '广东', '海南', '云南', '贵州', '四川', '湖南', '湖北', '河南', '山西', '陕西', '甘肃', '青海', '江西', '台湾', '香港', '澳门'
      ],
      map: {
        province: '', // 省
        district: '', // 区
        county: '' //  县
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      categoriesList: [], // 分类列表
      agentsList: [], // 经济列表
      formData: {
        title: '',
        desc: '',
        image: '',
        agent: '',
        content: '',
        address: ``,
        price: '',
        photos: [],
        tags: [],
        category: ''
      }
    }
  },
  async created() {
    // 获取分类下拉列表
    const res = await classify()
    // console.log(147, res)
    this.categoriesList = res
    this.agentsList = await agents()
    // console.log(99, res2)
  },
  methods: {
    // 省份改变(地址)
    changeFn(data) {
    //   console.log(155, data)
      this.formData.address = data
    },
    async delHouse(id) {
      delHouse(id)
    },
    // 父组件点击编辑时回显数据
    async editHuixian(id) {
    //   console.log(155, id)
      const res = await getEditHouse(id)
      this.formData = res
      //   地址下拉框回显
      this.map.province = res.address
      console.log(this.formData)
      console.log(156, res)
      //   回显图片
      this.$refs.img.fileList.push({
        url: this.formData.image
      })
      this.$refs.photos.fileList.push({
        url: this.formData.photos
      })
    },
    // tag标签
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue === '') {
        this.$message.warning('标签不能为空哈')
        return
      }
      if (inputValue) {
        console.log(194, inputValue)
        this.dynamicTags.push(inputValue)
        console.log(196, this.dynamicTags)
      }
      this.formData.tags.push(inputValue)
      this.inputVisible = false
      this.inputValue = ''
    },
    // tag标签

    // districtChange() {

    // },
    // countyChange() {

    // },

    // 确定按钮
    async confirm() {
      if (this.formData.id) {
        // 编辑房产
        // console.log(216, this.formData)

        await editHouse(this.formData)
      } else {
        // 新增房产
        console.log(151, this.$refs.img.fileList[0].url)
        console.log(152, this.$refs.photos.fileList[0].url)
        this.formData.image = this.$refs.img.fileList[0].url
        this.formData.photos = this.$refs.photos.fileList[0].url
        await addProperty(this.formData)
      }
      //   调用父组件事件刷新表单
      this.$emit('update')
      this.closeFn()
    },
    // 关闭按钮
    closeFn() {
      // 关闭父组件得弹窗
      this.$emit('update:dialogVisible', false)
      //   清空表单
      this.formData = {
        title: '',
        desc: '',
        image: '',
        agent: '',
        content: '',
        address: ``,
        price: '',
        photos: [],
        tags: [],
        category: ''
      }
      //   清空地区下拉框
      this.map = {
        province: '', // 省
        district: '', // 区
        county: '' //  县
      }
      //   重置校验
      this.$refs.form.resetFields()
      this.$refs.img.onRemove()
      this.$refs.photos.onRemove()
      //   图片清除
    //   this.$refs.img.removeList()
    //   this.$refs.photos.removeList()
    }

  }
}
</script>

<style>

</style>
